<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<title>产能监控</title>
<link href="/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="/vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="/js/lib/echarts/echarts.min.js"></script>
<script src="/js/device.js"></script>
<script type="text/javascript">
	$(function() {
		//产生num位随机数
		function getRandom(num) {
			var outTradeNo = ""; //订单号
			for (var i = 0; i < num; i++) //6位随机数，用以加在时间戳后面。
			{
				outTradeNo += Math.floor(Math.random() * 10);
			}
			return outTradeNo
		}
		//以时间戳+4位随机数产生一个订单号
		function getOrderNO() {
			var myDate = new Date();
			var ymd = myDate.getFullYear() + "" + (myDate.getMonth() + 1)
					+ myDate.getDate()
			//var HMS = myDate.getHours() + "" + myDate.getMinutes() + ""
			var hms = myDate.getSeconds()
			return ymd + hms + getRandom(4)
		}

		//初始化订单列表
		function initOrderHtml() {
			var tbody = $("#order-info")
			for (var i = 0; i < 15; i++) {
				var finsh = getRandom(2)
				tbody.append('<tr>' + '<td>' + getOrderNO() + '</td>' + '<td>A'
						+ getOrderNO() + '</td>' + '<td>盒子' + '</td>' + '<td>'
						+ finsh + '/100</td>' + '<td>' + finsh + '%</td>'
						+ '</tr>')
			}
		}

		//initOrderHtml()

	})
</script>
<style type="text/css">
html, body {
	background-color: #152349;
}

.panel-backgroud {
	background: #162a5f;
}

.dlp-head {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 8%;
	text-align: center;
	color: white;
	font-size: 2em;
	padding: 0.4em;
}

.dlp-left-one {
	position: absolute;
	top: 9%;
	left: 1%;
	width: 25%;
	height: 40%;
	text-align: center;
	color: white;
}

.dlp-left-two {
	position: absolute;
	top: 50%;
	left: 1%;
	width: 25%;
	height: 45%;
	text-align: center;
	color: white;
}

.dlp-center-one {
	position: absolute;
	top: 9%;
	left: 27%;
	width: 46%;
	height: 40%;
	text-align: center;
	color: white;
}

.dlp-center-two {
	position: absolute;
	top: 50%;
	left: 27%;
	width: 46%;
	height: 45%;
	text-align: center;
	color: white;
}

.dlp-right {
	position: absolute;
	top: 9%;
	right: 1%;
	width: 25%;
	height: 40%;
	text-align: center;
	color: white;
}

.dlp-panel-titile {
	font-size: 1.2em;
	padding: 2px;
	background-color: #2f56bc;
}

th {
	text-align: center !important;
}

.dlp-panel-body {
	text-align: left;
	margin: 10px;
}

.dlp-process {
	background-color: white;
}

.dlp-process-bar {
	background-color: #33c4e5;
	text-align: center;
}
</style>
</head>

<body>
	<div class="dlp-head panel-backgroud">
		<p>产能监控</p>
	</div>
	<div class="dlp-left-one panel-backgroud">
		<div class="dlp-panel-titile">生产线产能情况</div>
		<div style="text-align: left; margin: 10px;">
			<p>手板生产线</p>
			<div class="dlp-process">
				<div class="dlp-process-bar" style="width: 68%;">68%</div>
			</div>
			<p>叶片生产线</p>
			<div class="dlp-process">
				<div class="dlp-process-bar" style="width: 40%;">40%</div>
			</div>
			<p>齿科生产线</p>
			<div class="dlp-process">
				<div class="dlp-process-bar" style="width: 58%;">58%</div>
			</div>
			<p>玩具生产线</p>
			<div class="dlp-process">
				<div class="dlp-process-bar" style="width: 98%;">98%</div>
			</div>
		</div>
	</div>
	<div class="dlp-left-two panel-backgroud">
		<table cellspacing="0" cellpadding="3px" style="width: 100%;">
			<thead style="background-color: #2f56bc;">
				<tr>
					<th>工单号</th>
					<th>订单号</th>
					<th>产品名称</th>
					<th>正品/计划</th>
					<th>进度</th>
				</tr>
			</thead>
			<tbody id="order-info">
			<tbody id="order-info">
				<tr>
					<td>201811249</td>
					<td>A20181054</td>
					<td>涡轮叶片</td>
					<td>35/100</td>
					<td>35%</td>
				</tr>
				<tr>
					<td>201811545</td>
					<td>A20182054</td>
					<td>工学椅</td>
					<td>79/100</td>
					<td>79%</td>
				</tr>
				<tr>
					<td>201811244</td>
					<td>A20182054</td>
					<td>定制螺丝</td>
					<td>52/100</td>
					<td>52%</td>
				</tr>
				<tr>
					<td>201810546</td>
					<td>A20182054</td>
					<td>牙齿模型</td>
					<td>76/100</td>
					<td>76%</td>
				</tr>
				<tr>
					<td>201811540</td>
					<td>A20182054</td>
					<td>内骨骼</td>
					<td>33/100</td>
					<td>33%</td>
				</tr>
				<tr>
					<td>201820547</td>
					<td>A20112054</td>
					<td>鼠标外壳</td>
					<td>14/100</td>
					<td>14%</td>
				</tr>
				<tr>
					<td>201120547</td>
					<td>A18112054</td>
					<td>异形构件</td>
					<td>12/100</td>
					<td>12%</td>
				</tr>
				<tr>
					<td>201120541</td>
					<td>A20112054</td>
					<td>轴承</td>
					<td>87/100</td>
					<td>87%</td>
				</tr>
				<tr>
					<td>201120542</td>
					<td>A20182054</td>
					<td>手机壳</td>
					<td>42/100</td>
					<td>42%</td>
				</tr>
				<tr>
					<td>201820542</td>
					<td>A20112054</td>
					<td>电脑模具</td>
					<td>79/100</td>
					<td>79%</td>
				</tr>
				<tr>
					<td>201811542</td>
					<td>A20182054</td>
					<td>六角塔</td>
					<td>77/100</td>
					<td>77%</td>
				</tr>
			</tbody>
			</tbody>
			
		</table>
	</div>

	<div class="dlp-center-one panel-backgroud">
		<div id="driverPanel" style="width: 100%; height: 100%;"></div>
	</div>
	<div class="dlp-center-two panel-backgroud">
		<div class="dlp-panel-titile">最新播报</div>
		<ul style="height: 80%;">
			<marquee behavior="scroll" style="height: 100%;" direction="up"
				scrolldelay="200">
				<li>【启动】2018中国(西安)国际3D打印博览……</li>
				<li>【第三届中国3D打印创意设计大赛】全面启动！</li>
				<li>国家增材制造创新中心能力建设项目工程……</li>
				<li>春风十里不如你” 2018年工会春游活动</li>
				<li>第三届中国3D打印创意设计大赛报名已火热开启</li>
				<li>气氛保护密封箱体设备采购项目中标候选人公示</li>
				<li>砥砺奋进的国家增材制造创新中心</li>
				<li>【启动】2018中国(西安)国际3D打印博览……</li>
				<li>【第三届中国3D打印创意设计大赛】全面启动！</li>
				<li>国家增材制造创新中心能力建设项目工程……</li>
				<li>春风十里不如你” 2018年工会春游活动</li>
				<li>第三届中国3D打印创意设计大赛报名已火热开启</li>
				<li>气氛保护密封箱体设备采购项目中标候选人公示</li>
				<li>砥砺奋进的国家增材制造创新中心</li>
			</marquee>
		</ul>
	</div>

	<div class="dlp-right panel-backgroud" style="top: 9%; height: 22%;">
		<div class="dlp-panel-titile">本月产品生产计划</div>
		<div class="dlp-panel-body">
			<p>已生产</p>
			<div class="dlp-process">
				<div class="dlp-process-bar" style="width: 68%;">68%</div>
			</div>
			<p>计划生产</p>
			<div class="dlp-process">
				<div class="dlp-process-bar" style="width: 100%;">100%</div>
			</div>
		</div>
	</div>
	<div class="dlp-right panel-backgroud" style="top: 32%; height: 22%;">
		<div class="dlp-panel-titile">本月良品、不良品对比</div>
		<div id="comparePanel" style="width: 100%; height: 80%;"></div>
	</div>
	<div class="dlp-right panel-backgroud" style="top: 55%; height: 22%;">
		<div class="dlp-panel-titile">本月交付订单完成率</div>
		<div id="finishPanel" style="width: 100%; height: 82%;"></div>
	</div>
	<div class="dlp-right panel-backgroud" style="top: 78%; height: 17%;">
		<div class="dlp-panel-titile">本月产品生产进度</div>
		<div class="dlp-panel-body">
			<p>加工总量</p>
			<div class="dlp-process">
				<div class="dlp-process-bar" style="width: 86%;">86%</div>
			</div>
		</div>
	</div>
</body>

</html>